<template>
	<view class="goods-list-wapper" :class="type">
		<view class="goods-list-item" v-for="(item,index) in list" :key="index">
			<view @click="navToDetail(item)" :goods-data="item">
				<goods-item 
					:info="item" 
					:tag="tag" 
					:type="type" 
					:size="size"
					:showSubTitle="showSubTitle" 
					:showPrice="showPrice"
					:showOldPrice="showOldPrice"
					:showAction="showAction"
				>
					<view slot="subTitle"  slot-scope="{text}" >
						<slot name="subTitle" :text="text">{{text}}</slot>
					</view>
					
					<view slot="action" slot-scope="{text}">
						<slot name="action" :text="text">
							<button class="payButton" size="mini" @click="handleBtnClick(text)">购买</button>
						</slot>
					</view>
				</goods-item>
			</view>
		</view>
	</view>
</template>

<script>
	import GoodsItem from './new-goods-item.vue'
	export default {
		name: 'GoodsList',
		components:{ GoodsItem },
		props: {
			tag: {
				type:String
			},
			type: {
				type: String,
				default:"column"
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			showSubTitle: {
				type: Boolean,
				default: false
			},
			showPrice: {
				type: Boolean,
				default: true
			},
			showOldPrice: {
				type: Boolean,
				default: false
			},
			showAction:{
				type: Boolean,
				default: false
			},
			size: {
				type: String,
				default: 'base'
			}
		},
		data() {
			return {}
		},
		methods: {
			navToDetail(item) {
				this.$emit('navTo',item)
			},
			handleBtnClick(item) {
				this.$emit('btnClick',item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.payButton{
		background-color: rgb(190,146,105);
		color: snow;
	}
	.goods-list-wapper {
		display: flex;
		&.column {
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			.goods-list-item {
				width: 330rpx;
				margin-bottom: 30rpx!important;
			}
		}
		&.row {
			flex-direction: column;
		}
	}
	
</style>
